@keyframes loading-rotate
  to
    transform rotate(360deg)
@keyframes loading-path-rotate
  0%
    stroke-dasharray 1, 200
    stroke-dashoffset 0
  50%
    stroke-dasharray 89, 200
    stroke-dashoffset -35px
  100%
    stroke-dasharray 1, 200
    stroke-dashoffset -124px

.{$loading-prefix}
  position absolute
  top 0
  bottom 0
  left 0
  right 0
  background-color rgba($white-color, .6)
  z-index -1
  visibility hidden
  text-align center
  opacity 0
  transition opacity .5s
  .{$loading-prefix}-circular
    middle-center()
    height 42px
    > svg
      opacity 0
      width 42px
      height 42px
      transform opacity .5s
      transform-origin center center
      .circle
        stoke-dasharray 90, 150
        stroke-dashoffset 0
        stroke-width 2
        stroke $primary-color
        stroke-linecap round
  &.{$loading-prefix}-loading
    opacity 1
  &.{$loading-prefix}-visible
    visibility visible
    z-index 8
    svg
      opacity 1
      animation loading-rotate 2s linear infinite
      .circle
        animation loading-path-rotate 1.5s ease-in-out infinite
  &.{$loading-prefix}-full-screen
    position fixed
    z-index 2000

.{$loading-prefix}-parent
  position relative
  min-height 200px
